<!--策略启动-自定义-->
<template>
  <div :class="[(showFunc ? 'ac-func' : '')]" @click="hide">

    <div v-if="showFunc" class="func-frame" ref="func" :style="styleStr()">

      <div class="row jend">
        <LImage v-if="menuFace" class="func-jiao" :src="Config.img('function-sanjiao.png')" />
      </div>

      <div class="func-content bg4">
        <text class="font28 text2 func-text" v-for="(item, index) in funcs" v-bind:key="index"
          @click="funcClick(item,index)">{{item}}</text>
      </div>

      <div class="row jend">
        <LImage v-if="!menuFace" class="func-jiao" :src="Config.img('function-sanjiaox.png')" />
      </div>
    </div>
  </div>
</template>

<script>
  //组件

  //功能
  import jconfig from "@/_js/config";

  const weexFunction = weex.requireModule("WeexFunction");
  const dom = weex.requireModule("dom");

  export default {
    props: {
      right: {
        //右距离
        type: Number,
        default: 30,
      },
      left: {
        //左距离
        type: Number,
        default: 0,
      },
      top: {
        //上距离
        type: Number,
        default: 70,
      },
    },
    data() {
      return {
        Config: jconfig,

        menuTop: 0, //功能菜单上距离
        menuFace: true, //功能菜单方向：true 向上  false向下
        showFunc: false, //true 显示功能菜单

        textHeight: 80, //菜单文本高
        param: undefined, //附加参数

        funcs: [],
      };
    },

    mounted() {},

    methods: {
      show(funcs, position, content, param) {
        this.funcs = funcs;
        this.param = param;
        dom.getComponentRect(content, (contentFrame) => {
          var contentHeight = contentFrame.size.height;
          var funcsHeight = 80 * this.funcs.length + 60; //内容加上下边距，加三角高度
          var y = position.y + funcsHeight;
          if (y > contentHeight) {
            this.menuFace = false;
            this.menuTop = position.y - funcsHeight - 240; //减去导航栏高度，减去按钮高度
          } else {
            this.menuFace = true;
            this.menuTop = position.y - 190; //减去导航栏高度
          }
          this.showFunc = true;
        });
      },

      show2(funcs, position, content, param) {
        this.funcs = funcs;
        this.param = param;
        dom.getComponentRect(content, (contentFrame) => {
          var contentHeight = contentFrame.size.height;
          var funcsHeight = 80 * this.funcs.length + 60; //内容加上下边距，加三角高度
          var y = position.y + funcsHeight;
          if (y > contentHeight) {
            this.menuFace = false;
            this.menuTop = position.y - funcsHeight - 240 - 72; //减去导航栏高度，减去按钮高度
          } else {
            this.menuFace = true;
            this.menuTop = position.y - 190 - 72; //减去导航栏高度
          }
          this.showFunc = true;
        });
      },

      hide() {
        this.showFunc = false;
      },

      styleStr() {
        var style = { top: this.menuTop + "px" };
        if (this.right) {
          style["right"] = this.right + "px";
        } else {
          style["left"] = this.left + "px";
        }
        return style;
      },

      /********************************** 点击*/
      funcClick(item, index) {
        this.$emit("func", item, index, this.param);
        this.hide();
      },
    },
  };
</script>

<style src="@/_css/style.css" ></style>
<style scoped>
  /*************** 功能弹窗*/
  .ac-func {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
  }
  .func-frame {
    position: absolute;
  }
  .func-jiao {
    width: 28px;
    height: 20px;
    margin-right: 32px;
  }
  .func-content {
    border-radius: 16px;

    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    padding-right: 40px;
  }
  .func-text {
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
</style>